<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../include/tag.jsp"%>
<link rel="stylesheet" href="${ctx}/css/ui/form/jquery-ui.css">
<link rel="stylesheet" href="${ctx}/css/ui/gatherForm/create_form.css"/>
<style type="text/css">
    .disable-form .layui-form-item .layui-inline {
        width: auto!important;
        margin-right: 5px;
    }
</style>
<div id="edit_template_items" class="event-create-sign-form" style="min-height: 518px; max-width: 70%; min-width:70%; float: left;">
    <div class="template_form_items disable-form" style="padding-top: 10px">
        <h3><strong>固定栏位</strong></h3>
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 130px !important;">
                    <input type="text" class="layui-input" value="联系人">
                </div>
                <div class="cl"></div>
            </div>
            <%--<div class="layui-inline">
                <div class="layui-input-inline" style="width: 130px !important;">
                    <input type="text" class="layui-input" value="微信号">
                </div>
                <div class="cl"></div>
            </div>--%>
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 130px !important;">
                    <input type="text" class="layui-input" value="手机号码">
                </div>
                <div class="cl"></div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 130px!important;">
                    <input type="text" class="layui-input" value="性别">
                </div>
                <div class="cl"></div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 130px !important;">
                    <input type="text" class="layui-input" value="公司名称">
                </div>
                <div class="cl"></div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 130px !important;">
                    <input type="text" class="layui-input" value="公司职位">
                </div>
                <div class="cl"></div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 130px !important;">
                    <input type="text" class="layui-input" value="所属行业">
                </div>
                <div class="cl"></div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 130px !important;">
                    <input type="text" class="layui-input" value="备注">
                </div>
                <div class="cl"></div>
            </div>
        </div>
    </div>
    <div id="event_template_form_items" class="template_form_items" style="padding-top: 10px">
        <h3><strong>其他栏位</strong></h3>
        <c:forEach var="field" items="${fields}" varStatus="status">
            <div class="layui-form-item form-item-nn ${deleteStatus == true ? 'deleteStatus' : ''}" id="efi_${status.index}" data-id="${field.id}">
                <div class="layui-inline">
                    <div class="layui-input-inline" style="width: 75px !important; height: 38px!important;">
                        <input type="hidden" name="items[${status.index}].id"  class="item-id" value="${field.id}"/>
                        <input type="hidden" name="items[${status.index}].type" class="item-type" value="${field.type}"/>
                        <input type="hidden" name="items[${status.index}].sort" class="item-sort" value="${field.sort}"/>
                        <input type="hidden" name="items[${status.index}].category" class="item-category" value="${field.category}"/>
                        <c:choose>
                            <c:when test="${not empty field.required && field.required == 'true'}">
                                <input type="checkbox" checked="checked" lay-skin="primary" name="items[${status.index}].required" title="必填" value="true"/>
                            </c:when>
                            <c:otherwise>
                                <input type="checkbox" lay-skin="primary" name="items[${status.index}].required" title="必填" value="true"/>
                            </c:otherwise>
                        </c:choose>
                    </div>
                    <c:choose>
                        <c:when test="${field.type == 'radio' || field.type == 'checkbox' || field.type == 'select' || field.type == 'image' || field.type == 'date'}">
                            <div class="layui-input-inline" style="width: 70% !important;">
                                <input type="text" class="layui-input" name="items[${status.index}].title" value="${field.title}" lay-verify="required"/>
                            </div>
                        </c:when>
                        <c:otherwise>
                            <div class="layui-input-inline" style="width: 130px !important;">
                                <input type="text" class="layui-input" name="items[${status.index}].title" value="${field.title}" lay-verify="required"/>
                            </div>
                            <div class="layui-input-inline" style="width: 53% !important;">
                                <input type="text" class="layui-input" name="items[${status.index}].description" value="${field.description}" placeholder="提示信息写在这里！"/>
                            </div>
                        </c:otherwise>
                    </c:choose>
                    <c:if test="${deleteStatus == true}">
                        <div class="layui-input-inline" style="width: 40px !important;">
                            <a onclick="removeEventFormItem(this)" href="javascript:void(0);" style="line-height: 35px">
                                <i class="iconfont icon-delete btn-icon" style="font-size: 21px"></i>
                            </a>
                        </div>
                    </c:if>
                    <div class="cl"></div>
                    <c:if test="${field.type == 'radio' || field.type == 'checkbox' || field.type == 'select'}">
                        <div class="options">
                            <div class="event-create-sign-select" id="efis_${status.index}">
                                <c:forEach var="option" items="${field.subitems}" varStatus="ss">
                                    <div class="sub-item" data-id="${option.id}">
                                        <input type="hidden" name="items[${status.index}].subitems[${ss.index}].id" class="subitem-id" value="${option.id}"/>
                                        <input type="hidden" name="items[${status.index}].subitems[${ss.index}].sort" class="subitem-sort" value="${ss.count}"/>
                                        <div class="layui-input-inline sub-item-text">
                                            <input type="text" class="layui-input subitem-name" lay-verify="required" name="items[${status.index}].subitems[${ss.index}].name" value="${option.name}"/>
                                        </div>
                                        <c:if test="${deleteStatus == true}">
                                            <span name="event_form_item_ctrl" class="icon-close-new" onclick="javascript:removeEventFormItemValue(this);"></span>
                                        </c:if>
                                    </div>
                                </c:forEach>
                                <button type="button" class="btn create-event-label" onclick="javascript:addEventFormItemValue('${status.index}', this, false)">
                                    <span name="event_form_item_ctrl" class="icon-event-label-add"></span>
                                </button>
                                <p class="cl" style="margin-bottom: 0px !important; display: block !important;"></p>
                            </div>
                        </div>
                        <div class="cl"></div>
                    </c:if>
                </div>
            </div>
        </c:forEach>
    </div>
</div>
<div class="aside" id="edit_template_tools" style="max-width: 205px; float: right;">
    <h3>常用栏位</h3>
    <div class="event-create-sign-form-usual clearfix">
        <ul class="mr">
            <li>
                <button type="button" class="btn" onclick="javascript:addEventFormCommonItem(6);">
                    <span>QQ</span>
                </button>
            </li>
        </ul>
        <ul>
            <li>
                <button type="button" class="btn" onclick="javascript:addEventFormCommonItem(7);">
                    <span>邮箱</span>
                </button>
            </li>
        </ul>
    </div>
    <div class="event-create-sign-form-usual clearfix">
        <h3>自定义栏位</h3>
        <ul class="mr">
            <li>
                <button type="button" class="btn" onclick="javascript:addEventFormEmptyItem(0);">
                    <span>单行文本框</span>
                </button>
            </li>
            <li>
                <button type="button" class="btn" onclick="javascript:addEventFormEmptyItem(1);">
                    <span>数字输入框</span>
                </button>
            </li>
            <li>
                <button type="button" class="btn" onclick="javascript:addEventFormEmptyItem(2, false);">
                    <span>日期选择框</span>
                </button>
            </li>
            <li>
                <button type="button" class="btn" onclick="javascript:addEventFormEmptyItem(6, false);">
                    <span>下拉选择框</span>
                </button>
            </li>
        </ul>
        <ul>
            <li>
                <button type="button" class="btn" onclick="javascript:addEventFormEmptyItem(3);">
                    <span>多行文本框</span>
                </button>
            </li>
            <li>
                <button type="button" class="btn" onclick="javascript:addEventFormEmptyItem(4, false);">
                    <span>单选按钮框</span>
                </button>
            </li>
            <li>
                <button type="button" class="btn" onclick="javascript:addEventFormEmptyItem(5, false);">
                    <span>多选按钮框</span>
                </button>
            </li>
        </ul>
    </div>
</div>
<script type="text/html" id="form_item_template">
    {{# var index = d.index; }}
    {{# var tmpItem = d.tmpItem; }}
    {{# var title =  !util.isValid(tmpItem.Title) ? tmpItem.TypeTitle : tmpItem.Title; }}
    {{# var description = util.isValid(tmpItem.Description) ? tmpItem.Description : '';}}
    <div class="layui-form-item deleteStatus form-item-nn" id="efi_{{ index }}" data-id="">
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 75px!important; height: 38px!important; ">
                <input type="hidden" name="items[{{ index }}].type" class="item-type" value="{{ tmpItem.Type }}" />
                <input type="hidden" name="items[{{ index }}].sort" class="item-sort" value="{{ tmpItem.Sort }}" />
                <input type="hidden" name="items[{{ index }}].category" class="item-category" value="{{ tmpItem.Category }}" />
                <input type="checkbox" lay-skin="primary" name="items[{{ index }}].required" title="必填"
                       value="true" {{ tmpItem.required ? 'checked' : '' }}  />
            </div>
            {{# if(d.showPlaceholder){ }}
            <div class="layui-input-inline" style="width: 130px!important;">
                <input type="text" class="layui-input item-title" title="{{ title }}" placeholder="{{ title }}"
                       name="items[{{ index }}].title" value="{{ title }}" lay-verify="required" />
            </div>
            <div class="layui-input-inline" style="width: 53% !important;">
                <input type="text" name="items[{{ index }}].description" class="layui-input item-description"
                       value="{{ description }}" placeholder="提示信息写在这里！"/>
            </div>
            {{# }else{ }}
            <div class="layui-input-inline" style="width: 70%!important;">
                <input type="text" class="layui-input item-title" title="{{ title }}" placeholder="{{ title }}"
                       name="items[{{ index }}].title" value="{{ title }}" lay-verify="required" />
            </div>
            {{# } }}
            <div class="layui-input-inline" style="width: 40px!important;">
                <a onclick="removeEventFormItem(this)" href="javascript:void(0);" style="line-height: 35px">
                    <i class="iconfont icon-delete btn-icon" style="font-size: 21px"></i>
                </a>
            </div>
            <div class="cl"></div>
            {{# if(tmpItem.Type == "radio" || tmpItem.Type == "checkbox" || tmpItem.Type == "select"){ }}
            <div class="options">
                <div class="event-create-sign-select" id="efis_{{ index }}">
                    {{# if(tmpItem != undefined && tmpItem.Subitems != null && tmpItem.Subitems.length > 0){ }}
                        {{# for(var j = 0; j < tmpItem.Subitems.length; j++){ }}
                            <div class="sub-item">
                                <div class="layui-input-inline sub-item-text">
                                    <input type="hidden" name="items[{{ index }}].subitems[{{ j }}].sort" class="subitem-sort" value="{{ j + 1 }}" />
                                    <input type="text" class="layui-input subitem-name" lay-verify="required" name="items[{{ index }}].subitems[{{ j }}].name"
                                           value="{{ tmpItem.Subitems[j] == null ? '' : tmpItem.Subitems[j].name }}" />
                                </div>
                                <span name="event_form_item_ctrl" class="icon-close-new" onclick="javascript:removeEventFormItemValue(this);"></span>
                            </div>
                        {{# } }}
                    {{# }else{ }}
                        <div class="sub-item">
                            <input type="hidden" name="items[{{ index }}].subitems[0].sort" class="subitem-sort" />
                            <div class="layui-input-inline sub-item-text">
                                <input type="text" class="layui-input subitem-name" lay-verify="required" name="items[{{ index }}].subitems[0].name" />
                            </div>
                            <span name="event_form_item_ctrl" class="icon-close-new" onclick="javascript:removeEventFormItemValue(this);"></span>
                        </div>
                    {{# } }}
                    <button type="button" class="btn create-event-label" onclick="javascript:addEventFormItemValue('{{ index }}', this, false)">
                        <span name="event_form_item_ctrl" class="icon-event-label-add"></span>
                    </button>
                    <p class="cl" style="margin-bottom:0px!important; display:block!important;"></p>
                </div>
            </div>
            {{# } }}
        </div>
    </div>
</script>
<script type="text/html" id="form_item_opt">
    {{# var index = d.index; }}
    {{# var subIndex = d.subIndex; }}
    <div class="sub-item">
        <input type="hidden" name="items[{{ index }}].subitems[0].sort" class="subitem-sort" />
        <div class="layui-input-inline sub-item-text">
            <input type="text" class="layui-input subitem-name" lay-verify="required" name="items[{{ index }}].subitems[{{ subIndex }}].name" />
        </div>
        <span name="event_form_item_ctrl" class="icon-close-new" onclick="javascript:removeEventFormItemValue(this);"></span>
    </div>
</script>
<script src="${ctx}/script/form/jquery-1.12.4.js"></script>
<script src="${ctx}/script/form/jquery-ui.js"></script>
<script>
    var form = null;
    $(function () {

        layui.use(['form', 'laydate'], function () {
            form = layui.form, laydate = layui.laydate;

            form.on('checkbox(setting_size)', function(data) {
                var $target = $($(data.elem)[0]);
                var checked = $target.prop("checked");
                if (checked) {
                    $target.closest(".setting-size").find(".setting-size-max").show();
                } else {
                    $target.closest(".setting-size").find(".setting-size-max").hide();
                    $target.closest(".setting-size").find(".setting-size-max").find("input").val("");
                }
                $target.val(checked);
            });

            form.on('checkbox(setting_number)', function(data) {
                var $target = $($(data.elem)[0]);
                var checked = $target.prop("checked");
                if (checked) {
                    $target.closest(".setting-number").find(".setting-number-max").show();
                } else {
                    $target.closest(".setting-number").find(".setting-number-max").hide();
                    $target.closest(".setting-number").find(".setting-number-max").find("input").val("");
                }
                $target.val(checked);
            });

            $(".disable-form").find(":input").each(function (index, ele) {
                $(ele).prop("disabled", true);
            })

            form.on('checkbox');
        });

        // 拖拽排序
        $("#event_template_form_items").sortable({
        	items : ".deleteStatus",
            placeholder: 'sortable-placeholder',
            opacity: 0.5,
            forcePlaceholderSize: true
        });
        $("#event_template_form_items").disableSelection();

        $(document).tooltip({
            items: "#event_template_form_items .deleteStatus",
            content: function () {
                return "拖动栏目排序";
            },
            position: {
                my: "left center",
                at: "left center",
                using: function (position, feedback) {
                    var $element = feedback.target.element;
                    if ($element.find(".sub-item").length > 0) {
                        position = {
                            left: 505,
                            top: position.top - feedback.target.element.find(".options").height() / 2 - 13
                        }
                    } else if ($element.find(".pic-attachment").length > 0) {
                        position = {
                            left: 505,
                            top: position.top - 100
                        }
                    } else {
                        position = {
                            left: 505,
                            top: position.top - 10
                        }
                    }
                    $(this).css(position);
                }
            }
        });
    });


    // 常用栏位JSON
    var formCommonItems = [
        {"Type": "input", "Category": "FIELD_REALNAME", "Required": false, "Title": "姓名", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单行文本框"},
        {"Type": "radio", "Category": "FIELD_GENDER", "Required": false, "Title": "性别", "Subitems": ["男", "女"], "Description": null, "Value": null, "TypeTitle": "单选按钮框"},
        {"Type": "input", "Category": "FIELD_COMPANY", "Required": false, "Title": "公司", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单行文本框"},
        {"Type": "input", "Category": "FIELD_OFFICE", "Required": false, "Title": "职位", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单行文本框"},
        {"Type": "tel", "Category": "FIELD_MOBILE", "Required": false, "Title": "手机", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单行文本框"},
        {"Type": "input", "Category": "FIELD_WX", "Required": false, "Title": "微信", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单行文本框"},
        {"Type": "qq", "Category": "FIELD_QQ", "Required": false, "Title": "QQ", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单行文本框"},
        {"Type": "email", "Category": "FIELD_EMAIL", "Required": false, "Title": "邮箱", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单行文本框"}
    ];

    // 自定义栏位JSON
    var formEmptyItems = [
        {"Type": "input", "Category": "", "Required": false, "Title": "", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单行文本框"},
        {"Type": "number", "Category": "", "Required": false, "Title": "", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "数字输入框"},
        {"Type": "date", "Category": "", "Required": false, "Title": "", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "日期选择框"},
        {"Type": "textarea", "Category": "", "Required": false, "Title": "", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "多行文本框"},
        {"Type": "radio", "Category": "", "Required": false, "Title": "", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单选按钮框"},
        {"Type": "checkbox", "Category": "", "Required": false, "Title": "", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "多选按钮框"},
        {"Type": "select", "Category": "", "Required": false, "Title": "", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "下拉选择框"},
        {"Type": "image", "Category": "", "Required": false, "Title": "", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "图片附件"}
    ];

    // 添加选项
    function addEventFormItemValue(index, that) {
        var parent = $(that).closest(".event-create-sign-select");
        var subItem = $(parent).find(".sub-item:last");
        var getTpl = $("#form_item_opt").html();
        laytpl(getTpl).render({
            index : index,
            subIndex : $(that).closest(".event-create-sign-select").find(".sub-item").length
        }, function (html) {
            if (subItem.length == 0) {
                var addBtn = $(parent).find(".create-event-label");
                $(addBtn).before(html);
            } else {
                $(subItem).after(html);
            }
        });
    }

    // 创建栏位模板
    function createTemplateFormItem(item) {
        if (item == null)
            return null;
        var result = {
            Type: item.Type,
            Category: item.Category,
            Required: false,
            Title: item.Title,
            Description: item.Description,
            TypeTitle: item.TypeTitle,
            Subitems: new Array()
        };
        if (item.Subitems != null && item.Subitems.length > 0) {
            for (var i = 0; i < item.Subitems.length; i++) {
                result.Subitems.push(item.Subitems[i]);
            }
        }
        return result;
    }

    // 检查表单字段格式
    function checkField() {
        var flag = true;
        var length = $("#event_template_form_items .layui-form-item").length;
        $("#event_template_form_items .layui-form-item").each(
            function (i, i_ele) {
                var type = $(i_ele).find("input[type=hidden][name$=type]")
                    .val();
                if (type == "radio" || type == "checkbox"
                    || type == "select") {
                    length = $(i_ele).find(".sub-item").length;
                    if (length == 0) {
                        util.layerMsgError("请添加该字段的选项");
                        flag = false;
                        return false;
                    }
                }
            });

        return flag;
    }

    // 重置下标
    function resetFormIndex() {
        $("#event_template_form_items .layui-form-item").each(function (i, i_ele) {
            // 重置栏位
            $(i_ele).find(".layui-inline").children(".layui-input-inline").each(function (j, j_ele) {
                $(j_ele).find("[name^=items]").each(function (k, k_ele) {
                    var name = $(k_ele).attr("name");
                    var start = name.substring(0, name.indexOf("[") + 1);
                    var end = name.substring(name.indexOf("]"), name.length);
                    var newName = start + i + end;
                    $(k_ele).attr("name", newName);
                    if (name.indexOf("sort") != -1) {
                        $(k_ele).val(i + 1);
                    }
                });
            });

            // 重置选项
            $(i_ele).find(".layui-inline .event-create-sign-select").children(".sub-item").each(function (j, j_ele) {
                $(j_ele).find("[name^=items]").each(function (k, k_ele) {
                    var name = $(k_ele).attr("name");
                    var start = name.substring(0, name.indexOf("[") + 1);
                    var end = name.substring(name.indexOf("]"), name.length);
                    var newName = start + i + end;
                    $(k_ele).attr("name", newName);
                    name = $(k_ele).attr("name");
                    start = name.substring(0, name.lastIndexOf("[") + 1);
                    end = name.substring(name.lastIndexOf("]"), name.length);
                    newName = start + j + end;
                    $(k_ele).attr("name", newName);
                    if (name.indexOf("sort") != -1) {
                        $(k_ele).val(j + 1);
                    }
                });
            });
        });
    }

    // 删除栏位
    function removeEventFormItem(that) {
        var item = (that).closest(".layui-inline").closest(".layui-form-item");
        $(item).remove();
    }

    // 删除选项
    function removeEventFormItemValue(that) {
        var item = $(that).closest(".sub-item");
        $(item).remove();
    }

    // 添加常用栏位
    function addEventFormCommonItem(index) {
        if (formCommonItems != null && formCommonItems.length > index
            && index >= 0) {
            var commonItem = formCommonItems[index];
            if (commonItem != null) {
                renderEventFormTemplate(createTemplateFormItem(commonItem));
            }
        }
    }

    // 添加自定义栏位
    function addEventFormEmptyItem(index, showPlaceholder) {
        if (formEmptyItems != null && formEmptyItems.length > index
            && index >= 0) {
            var emptyItem = formEmptyItems[index];
            if (emptyItem != null) {
                renderEventFormTemplate(createTemplateFormItem(emptyItem), showPlaceholder);
            }
        }
    }

    // 添加栏位
    function renderEventFormTemplate(tmpItem, showPlaceholder) {
        if (!util.isValid(showPlaceholder)) {
            showPlaceholder = true;
        }
        var map = {
            index : $("#event_template_form_items .layui-form-item").length,
            tmpItem : tmpItem,
            showPlaceholder : showPlaceholder
        };
        var getTpl = $("#form_item_template").html();
        laytpl(getTpl).render(map, function (html) {
            $("#event_template_form_items").append(html);
        });

        form.render('checkbox');
    }

    function loadFormItem(formItemCache) {
        for (var i = 0; i < formItemCache.length; i++) {
            var map = formItemCache[i];
            var getTpl = $("#form_item_template").html();
            laytpl(getTpl).render(map, function (html) {
                $("#event_template_form_items").append(html);
            });
            form.render('checkbox');
        }
    }
</script>